import React, { Component } from "react";
import axios from "axios";
import message from "antd/lib/message";
import { connect } from "react-redux";
import { signup } from "../actions/index";
import { Form, Input, Button, Select, Row, Col } from "antd";
import { MY_LINK, USER_INFO_LINK } from "../actions/types.js";
import logo from "../images/logo.png";
const FormItem = Form.Item;
const Option = Select.Option;
class Login extends Component {
  state = {
    timer: 60,
    discodeBtn: false,
    clearInterval: false,
    btnText: "获取验证码",
    phoneCode: ""
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (values.captcha !== "" && parseInt(values.captcha) === parseInt(this.state.phoneCode)) {
          const data = `telphone=${values.phone}`;
          this.props.signup(data);
        } else {
          message.warning("请输入正确的验证码");
        }
        // const data = `telphone=${values.phone}&password=${values.password}`;
      }
    });
  };
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }
  //登陆完成跳转页面
  componentWillUpdate(next) {
    if (next.status === "success") {
      message.success("登录成功,请填写个人信息");
      this.props.history.push(USER_INFO_LINK);
    }
    if (next.status === "second") {
      message.success("登录成功");
      this.props.history.push(MY_LINK);
    }
  }
  checkPhone(phone) {
    if (!/^1[34578]\d{9}$/.test(phone)) {
      return false;
    }
    return true;
  }
  count = () => {
    let { timer } = this.state;
    let countDown = setInterval(() => {
      this.setState({ timer: timer--, btnText: timer + "s", discodeBtn: true }, () => {
        if (timer === 0) {
          clearInterval(countDown);
          this.setState({ btnText: "重新发送", discodeBtn: false });
        }
      });
    }, 1000);
  };
  sendCode = () => {
    let phoneNumber = this.props.form.getFieldValue("phone");
    if (this.checkPhone(phoneNumber)) {
      axios.get(`/Tgh/data/phone_text?phone=${phoneNumber}`).then(res => {
        this.setState({ phoneCode: res.data.text });
      });
      let { timer } = this.state;
      this.setState({ timer: timer--, discodeBtn: true });
      this.count();
    } else {
      message.warning("请输入正确的手机号");
      return;
    }
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const prefixSelector = getFieldDecorator("prefix", {
      initialValue: "86"
    })(
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
      </Select>
    );
    return (
      <div className="login-contain">
        <div className="top-title">
          <i className="fa fa-angle-left back" onClick={() => this.props.history.go(-1)} />
          登陆
        </div>
        <div style={{ backgroundImage: `url(${logo})` }} className="logo" />
        <Form onSubmit={this.handleSubmit} className="login-form">
          <FormItem>
            {getFieldDecorator("phone", {
              rules: [{ required: true, message: "请输入手机号" }]
            })(<Input addonBefore={prefixSelector} style={{ width: "100%" }} placeholder="请输入手机号" />)}
          </FormItem>
          <FormItem>
            <Row gutter={12}>
              <Col span={16} style={{ marginTop: "-1px" }}>
                {getFieldDecorator("captcha", {
                  rules: [{ required: true, message: "请输入你获取的验证码" }]
                })(<Input addonBefore={<span style={{ fontSize: "16px" }}>验证码</span>} placeholder="请输入验证码" />)}
              </Col>
              <Col span={8}>
                <Button type="primary" disabled={this.state.discodeBtn} onClick={this.sendCode}>
                  {this.state.discodeBtn ? <span>{this.state.btnText}</span> : <span>获取验证码</span>}
                </Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登陆
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

function mapStateToProps(state) {
  // console.log('state is',state);
  const { status, error } = state.auth;
  return { status, error };
}

export default connect(
  mapStateToProps,
  { signup }
)(Form.create()(Login));
